<template>
    <el-calendar>
        <template
                slot="dateCell"
                slot-scope="{date, data}">
            <div>
                <span>{{data.day.split('-').slice(2).join('-')}}</span>
                <div v-for="c in checkInList">
                    <span v-if="c.date===data.day && c.check"><i class="fa fa-check" style="color: #40BD4E;"/></span>
                    <span v-if="c.date===data.day && !c.check"><i class="fa fa-times" style="color: #FF414E;"/></span>
<!--                    <span v-if="c.date===data.day && !c.check"><i class="fa fa-times" style="color: #FF414E;"/></span>-->
                </div>
            </div>
        </template>
    </el-calendar>
</template>

<script>
    export default {
        props: {
            user: {
                type: Object,
                default: () => {
                    return {
                        id: '',
                    }
                }
            }
        },
        name: "CheckInCalendar",
        data(){
            return{
                checkInCalendar:{
                    time:'2020-11-01',
                    isCheck:1
                },
                checkInList:[],
                month:'',
            }
        },
        mounted() {
            this.initData()
            this.handle()
        },
        methods:{
            handle(){
                this.$nextTick(() => {
                    // 点击上个月
                    let prevBtn1 = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(1)');
                    prevBtn1.addEventListener('click',() => {
                        let d = new Date()
                        let m = d.getMonth()+1
                        let year = d.getFullYear()
                        m-=1
                        if(m<10){
                            m = '0'+m
                        }
                        this.month = year+'-'+m
                        this.initData()
                    })
                    // 点击今天
                    let prevBtn2 = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(2)');
                    prevBtn2.addEventListener('click',() => {
                        let d = new Date()
                        let m = d.getMonth()+1
                        let year = d.getFullYear()
                        if(m<10){
                            m = '0'+m
                        }
                        this.month = year+'-'+m
                        this.initData()
                    })
                    // 点击下个月
                    let prevBtn3 = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(3)');
                    prevBtn3.addEventListener('click',() => {
                        let d = new Date()
                        let m = d.getMonth()+1
                        let year = d.getFullYear()
                        m+=1
                        if(m<10){
                            m = '0'+m
                        }
                        this.month = year+'-'+m
                        this.initData()
                    })
                })
            },
            initData(){
                if(this.month===''){
                    let d = new Date()
                    let m = d.getMonth()+1
                    let year = d.getFullYear()
                    if(m<10){
                        m = '0'+m
                    }
                    this.month = year+'-'+m
                }
                let url = '/info/?userId='+this.user.id+'&date='+this.month
                console.log(url)
                this.getRequest(url).then(resp=>{
                    if(resp){
                        this.checkInList = resp
                        console.log(resp)
                    }
                })
            },

        }
    }
</script>

<style lang="less">
    .el-calendar__body{
        width: 100%;
        height: 500px;
    }
    .el-calendar-table .el-calendar-day{
        height: 70px;
    }
</style>
<style>
    i.fa.fa-times{
        height: 30px;
        width: 30px;
    }
</style>
